<template>
  <el-dialog
    top="70px"
    :visible.sync="visible"
    title="详情"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      class="dialogInner"
      :model="dataForm"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
      :label-width="$i18n.locale === 'en-US' ? '150px' : '150px'"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="商户名称：" prop="">
            {{ dataForm.name || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业名称：" prop="">
            {{ dataForm.companyName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业分类：" prop="">
            {{ $getDictLabel("CompanyType", dataForm.companyType) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商户类型" prop="merchantCategory">
            {{ $getDictLabel("MerchantCategory", dataForm.merchantCategory) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业法人：" prop="">
            {{ dataForm.legalPerson || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码：" prop="">
            {{ dataForm.creditCode || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人身份证号：" prop="">
            {{ dataForm.idCard || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属区域:" prop="">
            {{ dataForm.islandName || "--" }}
          </el-form-item>
        </el-col>

        <template v-if="dataForm.merchantCategory == 4">
          <el-col :span="12">
            <el-form-item label="营业时间:" prop="">
              {{ dataForm.openDate || "--" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="餐饮类型:" prop="">
              {{ $getDictLabel("food_type", dataForm.foodType) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最低价（人均）:" prop="">
              {{ dataForm.personPrice || "--" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提供服务:" prop="">
              {{ dataForm.provideService | delService }}
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="24">
          <el-form-item label="地址：" prop="">
            <!-- {{dataForm.province||'--省'}}{{dataForm.city||'--市'}}
                        {{dataForm.area||'--区/县'}}
                        {{dataForm.street||'--街道'}} -->
            {{ dataForm.areaDetail || "--" }}
          </el-form-item>
        </el-col>
        <h3>联系人信息</h3>
        <el-col :span="12">
          <el-form-item label="联系人姓名：" prop="">
            {{ dataForm.linkName || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人号码：" prop="">
            {{ dataForm.phone || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员用户名：" prop="">
            {{ dataForm.adminName || "--" }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="管理员密码：" prop="">
            加密不可见
            <!-- {{ dataForm.adminPassword || "--" }} -->
          </el-form-item>
        </el-col>
        <h3>资料/照片</h3>
        <el-col :span="12">
          <el-form-item label="相关证件照" prop="">
            <img
              v-if="dataForm.licensePic"
              :src="dataForm.licensePic"
              class="avatar"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="法人身份证(国徽面)：" prop="">
            <img
              v-if="dataForm.idCardFront"
              :src="dataForm.idCardFront"
              class="avatar"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人身份证(人像面)：" prop="">
            <img
              v-if="dataForm.idCardReverse"
              :src="dataForm.idCardReverse"
              class="avatar"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="店铺门头/公司照片：" prop="">
            <template v-if="dataForm.storeFrontPic">
              <img
                :src="item"
                class="avatar"
                :key="index"
                v-for="(item, index) in dataForm.storeFrontPic.split(',') || []"
              />
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import Cookies from "js-cookie";
import mixinRegionModule from "@/mixins/region-module";
export default {
  mixins: [mixinRegionModule],
  data() {
    return {
      visible: false,
      scenicOptions: [],
      fileList: [],
      num: 0,
      dataForm: {
        id: "",
      },
    };
  },
  components: {},
  filters: {
    delService(val) {
      let str = "";
      if (val != "null" && val) {
        let arr = JSON.parse(val);
        arr.forEach((item, i) => {
          str += item.provideService + ",";
          console.log(str);
        });
      }
      return str;
    },
  },
  methods: {
    init() {
      this.visible = true;
      this.getScenicOptions();
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取区域信息
    getScenicOptions() {
      this.$http
        .get("scenic/isscenic/selectScenicList", {})
        .then(({ data: res }) => {
          if (res.msg == "success") {
            this.scenicOptions = res.data;
          }
        });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get("/scenic/merchant/info/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          for (let i = 0; i < this.scenicOptions.length; i++) {
            if (this.scenicOptions[i].id == this.dataForm.islandId) {
              this.dataForm.islandName = this.scenicOptions[i].scenicName;
            }
          }
          this.dataForm.picList = this.dataForm.picList
            ? this.dataForm.picList
            : [];
          if (this.dataForm.picList) {
            for (let i = 0; i < this.dataForm.picList.length; i++) {
              if (this.dataForm.picList[i].type == 0) {
                this.dataForm.img0 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 1) {
                this.dataForm.img1 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 2) {
                this.dataForm.img2 = this.dataForm.picList[i].pic;
              }
            }
          }

          // 省市区数据
          if (this.dataForm.city) {
            this.cityAreaDetailInfoList(this.dataForm.province);
          }
          if (this.dataForm.area) {
            this.countyAreaDetailInfoList(this.dataForm.city);
          }
        })
        .catch(() => {});
    },
  },
};
</script>
<style scope="scope">
h3 {
  padding: 30px 0 15px;
  width: 94%;
  margin: 0 auto 30px;
  border-bottom: 1px solid #ddd;
  color: #303133;
  font-size: 20px;
  overflow: hidden;
}
</style>
